<template>
  <div class="wrap">
    <Steps :current="1">
        <Step title="基础信息" content="这里是该步骤的描述信息"></Step>
        <Step title="线路配置" content="这里是该步骤的描述信息"></Step>
        <Step title="人员配置" content="这里是该步骤的描述信息"></Step>
    </Steps>
    <div class="content">
      <Row>
        <Col span="8">
          <div class="left-1">
            <p>设备列表</p>
            <div class="search">
              <Input search icon="ios-search" placeholder="请输入要搜索的设备名称" v-model="searchValue" @on-click="setSearch" @on-enter="setSearch" />
            </div>
            <div class="left-1-body">
              <draggable
                :list="defaultList"
                :group="{ name: 'people', pull: 'clone', put: false }"
                @change="log"
                filter=".forbid"
                :move="onMove"
                @end="end"
              >
                <transition-group>
                  <div
                    :class="['body-center',item.id==ids?'item forbid':'item']"
                    v-for="(item,index) in defaultList"
                    :key="index"
                  >
                    <div class="item-img">
                      <img :src="item.url" />
                    </div>
                    <div class="body-right">
                      <span>{{item.name}}</span>
                      <br />
                      <span>{{item.jifang}}</span>
                      <br />
                      <span>设备编号：{{item.bianhao}}</span>
                      <br />
                      <span>设备类型：{{item.leixing}}</span>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </Col>
        <Col span="8">
          <div class="center-1">
            <p>添加设备</p>
            <div class="center-1-body">
              <draggable :list="defaultLists" group="people" @change="log">
                <transition-group>
                  <div
                    class="body-center"
                    v-for="(item,index) in defaultLists"
                    :key="index"
                    :class="hoverId==item.id?'hoverId':''"
                    @click="step(index,item.id)"
                    v-on:mouseover="changeActive(index,$event)" v-on:mouseout="removeActive($event)"
                  >
                   <span class="index-item">{{index+1}}</span>
                    <i class="jiantou iconfont icon-shuangjiantoushang" ><Icon type="ios-menu" /></i>
                    <div class="body-center-item">
                          <div class="item-img">
                             <img :src="item.url" style="width:134px;height:92px"/>
                          </div>
                          <div class="body-right">
                            <span class="titles">步骤标题：{{item.title}}</span>
                            <br />
                            <span>步骤描述: {{item.desc}}</span>
                            <br />
                            <span>是否拍照: {{item.carmar=='1'?'是':'否'}} <span v-if="item.carmar=='1'">({{item.carmarNum}})</span></span>
                            <br />
                            <span>巡检设备: {{item.name}}</span>
                            <br />
                            <span>物资编号: {{item.num}}</span>
                          </div>
                    </div>
                    <i class="deleted el-icon-delete" :class="deleteId ==index?'showDeleted':''"  @click.stop="deleted(item.id)"></i>
                     <Modal
                        v-model="modal2"
                        title="删除数据"
                        @on-ok="deleteOk">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-information-circle"></Icon>
                            <span>删除警告</span>
                        </p>
                        <p>您确定要删除当前步骤吗</p>
                    </Modal>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </Col>
        <Col span="8">
            <div class="right-1">
              <div class="top">
                <p>步骤配置</p>
                <div class="stpes">
                  <Form :model="defaultLists[selectedIndex]" :label-width="100" label-position="left" inline>
                    <FormItem label="步骤标题:">
                      <Input size="large" v-model="defaultLists[selectedIndex].title" placeholder="请输入巡检标题" />
                    </FormItem>
                    <br />
                    <FormItem label="步骤描述:">
                      <Input size="large" v-model="defaultLists[selectedIndex].desc" placeholder="请输入巡检步骤描述" />
                    </FormItem>
                    <br />
                    <FormItem label="是否需要拍照">
                      <RadioGroup v-model="defaultLists[selectedIndex].carmar" @on-change="radios">
                        <Radio label="1">是</Radio>
                        <Radio label="0">否</Radio>
                      </RadioGroup>
                    </FormItem>
                    <br />
                    <FormItem v-show="radioItem" label="照片张数:">
                      <InputNumber :max="10" :min="1" v-model="defaultLists[selectedIndex].carmarNum"></InputNumber>
                    </FormItem>
                    <br />
                  </Form>
                </div>
              </div>
              <div class="bottoms">
                <div class="p"><p>自定义表单</p></div>
                <div class="bottom-box">
                  <button class="bottoms-button" @click="changeModal1">添加</button>
                  <div class="bottoms-item">
                    <div class="stpes steps-item" v-for="(item ,index) in steps" :key="item.id">
                      <!-- 判断是否是选项类步骤 -->
                      <div class="one" v-if="item.type=='radio'">
                        <el-collapse accordion>
                          <el-collapse-item>
                            <template slot="title">
                              <span class="radio-title">{{item.id}}:选项表单</span><span class="delete-icon"><i class="el-icon-delete" @click.stop="deleteList(index)"></i><i class="el-icon-s-unfold "></i></span>
                            </template>
                                <div  class="radio"><span >选项标题：</span>
                                  <Input v-model="item.title" style="width: 83%"/>
                                </div>
                                <div  class="radio radioed"><span >表单选项：</span>
                                <div class="radio-box">
                                    <div class="class">
                                      <Input class="radios-input" v-for="(item,i) of items" v-model="items[i]" :key="i" placeholder="请输入选项内容">
                                        <span slot="prepend">{{String.fromCharCode(i + 65)}}</span>
                                        <span slot="append" @click="DeleteSelect(item,i)"><i class="el-icon-delete"></i></span>
                                      </Input>
                                    </div>
                                      <!-- <Button type="dashed" >+ 添加</Button> -->
                                    <Button type="dashed" class="dashed" @click="handleAdd">+添加</Button>
                                  </div>
                                </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                      <!-- 判断是否是文本类选项 -->
                      <div class="one" v-if="item.type=='textarea'">
                        <el-collapse accordion>
                          <el-collapse-item>
                              <template slot="title">
                                <span class="radio-title">{{item.id}}:文本表单</span><span class="delete-icon icon-delete"><i class="el-icon-delete" @click.stop="deleteList(index)"></i><i class="el-icon-s-unfold "></i></span>
                              </template>
                              <div class="textarea">
                                <span>表单标题：</span>
                                <Input v-model="item.title" style="width:83%"/>
                              </div>
                              <div class="textarea">
                                <span>表单内容：</span>
                                <Input class="input-item" v-model="item.describe" size="large" :type="item.type" :placeholder="item.placeholder"  />
                              </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
        </Col>
      </Row>
      <!-- 弹窗自定义表单 -->
      <Modal
        v-model="modal1"
        :mask-closable="true"
        scrollable
        title="自定义表单"
        @on-ok="ok"
        @on-cancel="cancel"
      >
        <Form :model="formItems" :label-width="80">
          <FormItem label="标题">
            <Input v-model="formItems.title" type="text" placeholder="请输入标题"/>
          </FormItem>
          <FormItem label="类型">
            <Select v-model="formItems.type" @on-change="selected">
              <Option value="textarea">文本</Option>
              <Option value="optionSelect">选项</Option>
            </Select>
          </FormItem>
        </Form>
      </Modal>
    </div>
    <div class="StepBtns">
      <Button type="primary" class="Button" @click="prev">上一步</Button>
      <Button type="primary" class="Button" @click="next(formItem)">下一步</Button>
    </div>
  </div>
</template>

<script>
// 导入draggable组件
import draggable from 'vuedraggable'
export default {
  props: ['current'],
  components: {
    draggable
  },
  data () {
    return {
      moveId: [],
      ids: -1,
      defaultList: [
        {
          id: 0,
          name: 'xxx设备名称xxxx11',
          jifang: 'xxxx机房xxxx厂区11',
          bianhao: 'ADWW33423',
          leixing: 'xxxxx类型',
          url:
            'http://y0.ifengimg.com/d4a44fff10624b98/2013/1021/rdn_526466b752409.jpg'
        },
        {
          id: 1,
          name: 'xxx设备名称xxxx22',
          jifang: 'xxxx机房xxxx厂区22',
          bianhao: 'ADWW33423',
          leixing: 'xxxxx类型',
          url:
            'http://y0.ifengimg.com/d4a44fff10624b98/2013/1021/rdn_526466b752409.jpg'
        }
      ],
      defaultLists: [
        {
          id: 2,
          title: '',
          name: 'xxx设备名称xxxxONE1',
          desc: '',
          carmar: '1',
          carmarNum: 2,
          num: '',
          url:
            'http://y0.ifengimg.com/d4a44fff10624b98/2013/1021/rdn_526466b752409.jpg'
        },
        {
          id: 3,
          title: '',
          name: 'xxx设备名称xxxxONE2',
          desc: '',
          carmar: '0',
          carmarNum: 0,
          num: '',
          url:
            'http://y0.ifengimg.com/d4a44fff10624b98/2013/1021/rdn_526466b752409.jpg'
        }
      ],
      controlOnStart: true,
      formItem: {
        // 表单内容
        title: '',
        radio: '1',
        num: 0,
        desc: ''
      },
      index: 1,
      formItems: {
        title: '',
        type: '1',
        // wenben: '',
        optionSelect: [
          {
            value: '',
            index: 1
          }
        ]
      },
      items: [],
      radioItem: true, // 是否需要照片数量判断
      modal1: false, // 表单弹出框
      steps: [
        {
          id: 1,
          title: '请输入设备此刻的温度',
          type: 'textarea',
          describe: '',
          placeholder: '请输入温度'
        },
        {
          id: 2,
          title: '请检查此设备是否正常',
          type: 'radio',
          select: 1,
          radiod: [
            {
              index: 1,
              value: '正常'
            },
            {
              index: 2,
              value: '异常'
            }
          ]
        }
      ],
      changeSelected: '',
      mes: true,
      searchValue: '',
      hoverId: 0,
      deleteId: -1,
      modal2: false,
      deleteById: 0,
      selectedIndex: 0
    }
  },
  created () {
  },
  methods: {
    // 上一步
    prev () {
      this.$router.push({ path: '/StepOne' })
    },
    // 下一步
    next () {
      this.$router.push({ path: '/StepThree' })
    },
    // 设备删除
    deleted (id) {
      this.deleteById = id
      this.modal2 = true
      console.log(this.defaultLists)
      this.moveId.forEach((item, i) => {
        if (item == id) {
          this.moveId.splice(i, 1)
        }
      })
    },
    deleteOk () {
      this.defaultLists.forEach((item, i) => {
        if (this.deleteById == item.id) {
          this.defaultLists.splice(i, 1)
        }
      })
    },

    // 设备点击添加步骤
    step (index, id) {
      this.hoverId = id
      this.selectedIndex = index
      if (this.defaultLists[this.selectedIndex].carmar == '0') {
        this.radioItem = false
      }
    },
    changeActive (index, $event) {
      this.deleteId = index
    },
    removeActive ($event) {
      // this.deleteId == -1
    },
    log (evt) {
      console.log(evt)
      if (evt.added) {
        this.moveId.push(evt.added.element.id)
        //  evt.added.element['id']=this.defaultLists.length
      }
      //  window.console.log(evt);
      console.log(this.defaultLists)
    },
    // move回调方法
    onMove (e) {
      if (this.moveId.length == 0) {
        return true
      } else {
        var res = this.moveId.some((v) => e.draggedContext.element.id == v)
        if (!res) {
          console.log(11111111)
          return true
        } else {
          if (this.mes) {
            this.$Message.warning('已经存在')
            this.mes = false
          }
          return false
        }
      }
    },
    end () {
      this.mes = true
    },
    // 表单数据
    handleSubmit (e) {
      console.log(e)
    },
    // 判断是否拍照
    radios (e) {
      console.log(e)
      if (e == '0') {
        this.defaultLists[this.selectedIndex].carmar = '0'
        this.defaultLists[this.selectedIndex].carmarNum = 0
        this.radioItem = false
      } else {
        this.radioItem = true
        this.defaultLists[this.selectedIndex].carmar = '1'
      }
    },
    // 自定义表单点击确实
    ok () {
      // console.log(this.formItems);
      if (this.formItems.type === 'optionSelect') {
        var arr = {
          id: this.steps.length + 1,
          title: this.formItems.title,
          type: 'radio',
          select: 1,
          radiod: this.formItems.optionSelect
        }
        this.steps.push(arr)
        console.log(this.steps)
      } else {
        var arr1 = {
          id: this.steps.length + 1,
          title: this.formItems.title,
          type: this.formItems.type,
          placeholder: this.formItems.wenben
        }
        this.steps.push(arr1)
        console.log(this.steps)
      }
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    // 判断自定义表单中是文本还是选项
    selected (e) {
      console.log(e)
      this.changeSelected = e
    },
    // 自定义表单中添加选项
    handleAdd () {
      this.items.push('')
      // this.index++
      // this.formItems.optionSelect.push({
      //   value: '',
      //   index: this.index
      // })
    },
    // 搜索
    setSearch () {
      var arr = []
      var list = this.defaultList
      // var keyword = this.searchValue
      var reg = new RegExp(this.searchValue)
      for (var i = 0; i < list.length; i++) {
        console.log(reg.test(list[i]))
        var name = list[i].name
        if (reg.test(name)) {
          arr.push(list[i])
        }
      }
      this.defaultList = arr
    },
    DeleteSelect (item, index) {
      this.items.splice(index, 1)
    },
    deleteList (index) {
      this.steps.splice(index, 1)
    },
    changeModal1 () {
      this.modal1 = true
      console.log(this.modal1)
    }
  },
  mounted () {}
}
</script>

<style lang="less">
@import "../assets/style/StepTwo/StepTwo";
</style>
